<style lang="css" src="./subscription-manage.css"></style>

<template lang="html">
  <div class="subscription-manage">
    <div class="subscription-body ly-col-flex">
      <div class="subscription-title">订阅管理</div>
      <div class="input-group search-group">
        <input type="text" class="form-control" placeholder="输入兑换码">
        <span class="input-group-btn">
          <button class="btn btn-primary" type="button">搜索</button>
        </span>
      </div>
      <table class="table table-bordered table-hover">
        <thead>
          <tr>
            <th class="col-xs-2">兑换码</th>
            <th class="col-xs-2">用户昵称</th>
            <th class="col-xs-2">订阅的组合名称</th>
            <th class="col-xs-2">兑换时长</th>
            <th class="col-xs-4"></th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in subscriptionList" track-by="$index">
            <td class="col-sm-2">{{item.id}}</td>
            <td class="col-sm-2">{{item.name}}</td>
            <td class="col-sm-2">{{item.portfolio}}</td>
            <td class="col-sm-2">{{item.time}}</td>
            <td class="col-sm-4">
              <button class="btn btn-sm"
                :class="{'btn-danger': item.hasSubscribe === true, 'btn-primary': item.hasSubscribe === false}"
                @click="evtToogleSubscription($index)">{{item.hasSubscribe === true ? '取消订阅' : '订阅'}}</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script src="./subscription-manage.js"></script>
